<template>
  <div class="base-information-unk">
    <div class="form-item-warpper">
      <div class="form-item form-item-with-button">
        <input type="text" v-model.trim="autoMatchContent" :placeholder="$t('webchat.enterCustNameOrPhone')" @keyup.enter="searchExistCustomers">

        <button v-show="autoMatchContent" class="delete-button"
          @click="resetAutoInfo"
        >
          <i class="el-icon-close"></i>
        </button>

        <div class="button">
          <button class="el-icon-search" @click="searchExistCustomers"></button>
        </div>
      </div>

      <el-dropdown split-button type="primary" trigger="click" size="mini" class="dropdown" @click="addCustomer">
        {{$t('customer.customerSlot.addCustomer')}}
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="megerCustomerInfo">{{$t('webchat.connectOtherCustomers')}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <!-- <div class="form-item">
      <input type="text"
        v-model.trim="autoCustName"
        :placeholder="$t('customer.customerSlot.autoCustNamePlaceholder')"
      >
    </div>
    <div class="form-item">
      <input type="text"
        v-model.trim="autoCustPhone"
        :placeholder="$t('customer.customerSlot.autoCustPhonePlaceholder')"
      >
    </div>
    <div class="form-item">
      <input type="text"
        v-model.trim="autoCustPerson"
        :placeholder="$t('customer.customerSlot.autoCustPersonPlaceholder')"
      >
    </div>
    <div class="button-group">
      <el-button type="primary" size="mini" @click="searchExistCustomers">{{$t('webchat.queryCustomer')}}</el-button>
      <el-button size="mini" @click="addCustomer">{{$t('webchat.addCustomer')}}</el-button>
      <el-button size="mini" @click="megerCustomerInfo">{{$t('webchat.associateCustomer')}}</el-button>
    </div> -->
    <div v-if="autoCustLength === 0">{{$t('customer.customerSlot.defaultBind')}}</div>
    <div v-if="autoCustLength > 0" class="exist_custom">
      <span>{{$t('customer.customerSlot.changeBind1')}}</span>
      <span>{{autoCustLength}}</span>
      <span>
        {{$t('customer.customerSlot.changeBind2')}}
        <a @click.stop="changeBind3()">{{$t('customer.customerSlot.changeBind3')}}</a>
      </span>
    </div>

    <!--合并客户模态框-->
    <MergeCustomerDialog
      ref="MergeCustomerDialog"
      :title="title"
      :customer="customer"
      :bindCustomer="bindCustomer"
    />
  </div>
</template>

<script>
import * as webchatTypes from 'src/store/modules/webchat/mutation-types.js'
import MergeCustomerDialog from './dialog/MergeCustomerDialog.vue'
import { isEmpty } from 'lodash'

export default {
  name: 'BaseInformationUnk',
  components: {
    MergeCustomerDialog
  },
  data () {
    return {
      title: '',
      bindCustomer: {  // 绑定已存在客户的数据
        searchShow: true,
        custObj: {},
        form: {}
      }
    }
  },
  props: {
    customer: {
      type: Object,
      default: function () {
        return {}
      }
    },
    currentBusinessObj: Object
  },
  watch: {
    callId: {
      handler: function () {
        this.bindCustomer = {
          searchShow: true,
          custObj: {},
          form: {}
        }
      }
    }
  },
  computed: {
    path () {
      return this.$route.path.split('/')
    },
    type () {
      return this.path[2] || ''
    },
    tabType () {
      return this.path[3] || ''
    },
    callId () {
      return this.path[4] || ''
    },
    autoMatchContent: {
      get () {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.state.webchat.autoCust[this.callId].autoMatchContent || ''
        }
      },
      set (value) {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.commit(webchatTypes.SET_AUTOMATCHCONTENT_VAL, {sessionId: this.callId, data: value})
        }
      }
    },
    autoCustName: {
      get () {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.state.webchat.autoCust[this.callId].autoCustName || ''
        }
      },
      set (value) {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.commit(webchatTypes.SET_AUTOCUSTNAME_VAL, {sessionId: this.callId, data: value})
        }
      }
    },
    autoCustPhone: {
      get () {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.state.webchat.autoCust[this.callId].autoCustPhone || ''
        }
      },
      set (value) {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.commit(webchatTypes.SET_AUTOCUSTPHONE_VAL, {sessionId: this.callId, data: value})
        }
      }
    },
    autoCustPerson: {
      get () {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.state.webchat.autoCust[this.callId].autoContectPerson || ''
        }
      },
      set (value) {
        if (this.$store.state.webchat.autoCust[this.callId]) {
          return this.$store.commit(webchatTypes.SET_AUTOCUSTPERSON_VAL, {sessionId: this.callId, data: value})
        }
      }
    },
    autoCustLength () {
      return this.$store.state.webchat.autoCust[this.callId] && this.$store.state.webchat.autoCust[this.callId].autoCustLength || 0
    },
    autoCust () {
      return this.$store.state.webchat.autoCust[this.callId]
    },
    autoCustObj () {
      return this.$store.state.webchat.autoCust[this.callId].autoCustObj
    }
  },
  methods: {
    addCustomer () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-新添加客户'])
      this.$emit('openAddCustomerSubPanel')
    },
    searchExistCustomers () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-手动查询客户'])
      this.bindCustomer.form = {
        'phone': this.autoMatchContent,
        'displayName': this.autoMatchContent,
        'page': 1,
        'limit': 10
      }
      // if (this.autoCustPhone && !this.autoCustName) {
      //   this.bindCustomer.form = {'phone': this.autoCustPhone, 'page': 1, 'limit': 10}
      // }
      // if (this.autoCustName && !this.autoCustPhone) {
      //   this.bindCustomer.form = {'displayName': this.autoCustName, 'page': 1, 'limit': 10}
      // }
      // if (this.autoCustPhone && this.autoCustName) {
      //   this.bindCustomer.form = {'displayName': this.autoCustName, 'phone': this.autoCustPhone, 'page': 1, 'limit': 10, isBind: true}
      // }
      this.bindCustomer.form.type = 'webchat'
      this.bindExistCustomers(true)
    },
    resetAutoInfo () {
      this.bindCustomer.form = {}

      let info = {
        autoCustName: this.$store.state.webchat.autoCust[this.callId].autoCustName || this.autoCustName,
        autoCustPhone: this.$store.state.webchat.autoCust[this.callId].autoCustPhone || this.autoCustPhone,
        autoMatchContent: '',
        autoMatchType: this.$store.state.webchat.autoCust[this.callId].autoMatchType,
        autoCustObj: {},
        autoCustLength: 0,
        importSid: this.$store.state.webchat.autoCust[this.callId].importSid
      }
      this.$store.commit(webchatTypes.AUTO_CUST_INFO, {sessionId: this.callId, data: info})
    },
    bindExistCustomers (noSetCustObj) {
      var open = true
      this.title = this.$t('customer.customerSlot.changeBind3')
      this.bindCustomer.searchShow = false
      this.bindCustomer.form.importSid = this.$store.state.webchat.autoCust[this.callId].importSid || ''
      if (!this.autoMatchContent && !this.bindCustomer.form.importSid && noSetCustObj) {
        open = false
        let info = {
          autoCustName: this.$store.state.webchat.autoCust[this.callId].autoCustName || this.autoCustName,
          autoCustPhone: this.$store.state.webchat.autoCust[this.callId].autoCustPhone || this.autoCustPhone,
          autoMatchContent: this.$store.state.webchat.autoCust[this.callId].autoMatchContent,
          autoMatchType: this.$store.state.webchat.autoCust[this.callId].autoMatchType,
          autoCustObj: {},
          autoCustLength: 0,
          importSid: this.$store.state.webchat.autoCust[this.callId].importSid
        }
        this.$store.commit(webchatTypes.AUTO_CUST_INFO, {sessionId: this.callId, data: info})
      }

      open && this.$refs.MergeCustomerDialog.open()
    },
    changeBind3 () {
      if (isEmpty(this.bindCustomer.form)) {
        this.searchExistCustomers()
      } else {
        this.bindExistCustomers(false)
      }
    },
    megerCustomerInfo () {
      window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-关联其他客户'])
      this.title = this.$t('customer.customerSlot.choseCustomer')
      this.bindCustomer.form = null
      this.bindCustomer.custObj = null
      this.bindCustomer.searchShow = true
      this.$refs.MergeCustomerDialog.open()
    }
  }
}
</script>

<style lang="stylus">
.base-information-unk
  .dropdown
    .el-button
      padding-left 8px
      padding-right 8px
    .el-dropdown__caret-button
      padding-left 5px
      padding-right 5px
  .el-dropdown .el-dropdown__caret-button::before
    top 0
    bottom 0
</style>


<style lang="stylus" scoped>
@import "../../../../../assets/common.styl"
.base-information-unk
  padding-bottom 20px
  border-bottom solid 1px #d9d9d9
.form-item-warpper
  max-width 280px
  padding-right 105px
  position relative
.dropdown
  position absolute
  right 0px
  top 14px
.form-item.form-item-with-button
  position relative
  width 100%
  height 28px
  margin-top 14px
  margin-bottom 14px
  display inline-table
  input
    width 100%
    height 28px
    border solid $c-his-border 1px
    border-radius 4px 0px 0px 4px
    padding 5px 15px 5px 10px
    font-size 12px
    line-height 13px
    box-sizing border-box
    display table-cell
    vertical-align middle
    text-overflow ellipsis
  .button
    width 1px
    display table-cell
    vertical-align middle
    button
      height 100%
      background none
      border solid $c-his-border 1px
      border-left none
      border-radius 0px 3px 3px 0px
      color #A6A6A6
  .delete-button
    position absolute
    background transparent
    border none
    color #A6A6A6
    top 6px
    right 25px
    font-size 14px
    cursor pointer
    padding 1px 6px
    line-height 16px
.button-group
  margin 0px -5px
  button
    margin 0 5px 10px 5px
    padding 5px 8px
</style>
